<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="教师状态">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
          <el-option label="正常" value="normal" />
          <el-option label="禁用" value="disabled" />
        </el-select>
      </el-form-item>
      <el-form-item label="教师名称">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入教师名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="教师手机号">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入教师手机号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<!--        <el-button type="success" icon="el-icon-plus" size="mini" @click="showAddDialog">新增教师</el-button>-->
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="showAddDialog"
        >新增教师</el-button>
      </el-col>
    </el-row>
    <!-- 教师列表 -->
    <el-table v-loading="loading" :data="teacherList" style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column label="教师名称" prop="name" />
      <el-table-column label="教师手机号" prop="phone" />
      <el-table-column label="岗位" prop="position" />
      <el-table-column label="教师介绍" prop="introduction" />
      <el-table-column label="负责课程数量" prop="courseCount" />
      <el-table-column label="出题数量" prop="questionCount" />
      <el-table-column label="注册时间" prop="registerTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.registerTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.status === 'normal' ? '正常' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleEnable(scope.row)">{{ scope.row.status === 'normal' ? '禁用' : '启用' }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-key" @click="handleResetPassword(scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 编辑教师信息弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :model="teacherInfo" label-width="80px">
        <el-form-item label="教师名称">
          <el-input v-model="teacherInfo.name" placeholder="请输入教师名称" />
        </el-form-item>
        <el-form-item label="教师手机">
          <el-input v-model="teacherInfo.phone" placeholder="请输入教师手机号" />
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="teacherInfo.position" placeholder="请输入岗位" />
        </el-form-item>
        <el-form-item label="教师介绍">
          <el-input
            type="textarea"
            v-model="teacherInfo.introduction"
            placeholder="请输入教师介绍"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTeacherInfo">保存</el-button>
      </span>
    </el-dialog>

    <!-- 确认禁用弹窗 -->
    <el-dialog
      title="确认禁用"
      :visible.sync="disableDialogVisible"
      width="30%"
    >
      <p>此操作将禁用<strong>{{ currentTeacherName }}</strong>，是否继续?</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="disableDialogVisible = false">再想想</el-button>
        <el-button type="primary" @click="handleDisableTeacher">确认禁用</el-button>
      </span>
    </el-dialog>

    <!-- 重置密码弹窗 -->
    <el-dialog
      title="重置密码"
      :visible.sync="resetPasswordDialogVisible"
      width="30%"
    >
      <p>请确认，是否重置<strong>{{ currentTeacherName }}</strong>的密码?</p>
      <p>重置后，初始密码为<strong>123456</strong>，请通知教师尽快修改密码</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetPasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleResetTeacherPassword">重置</el-button>
      </span>
    </el-dialog>

    <!-- 新增教师弹窗 -->
    <el-dialog title="新增教师账号" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="newTeacherInfo" label-width="80px">
        <el-form-item label="教师名称">
          <el-input v-model="newTeacherInfo.name" placeholder="请输入教师名称" />
        </el-form-item>
        <el-form-item label="教师手机">
          <el-input v-model="newTeacherInfo.phone" placeholder="请输入教师手机号" />
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="newTeacherInfo.position" placeholder="请输入岗位" />
        </el-form-item>
        <el-form-item label="教师介绍">
          <el-input
            type="textarea"
            v-model="newTeacherInfo.introduction"
            placeholder="请输入教师介绍"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveNewTeacherInfo">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index";
import Pagination from "@/components/Pagination"; // 分页组件

export default {
  name: "TeacherManagement",
  components: {
    Pagination
  },
  data() {
    return {
      loading: true,
      showSearch: true,
      total: 0,
      teacherList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        phone: undefined,
        status: undefined
      },
      dialogTitle: "编辑教师信息",
      dialogVisible: false,
      disableDialogVisible: false,
      resetPasswordDialogVisible: false,
      addDialogVisible: false,
      teacherInfo: {
        name: '',
        phone: '',
        position: '',
        introduction: '',
        courseCount: 0,
        questionCount: 0,
        registerTime: '',
        status: 'normal'
      },
      newTeacherInfo: {
        name: '',
        avatar: '',
        phone: '',
        position: '',
        introduction: ''
      },
      currentTeacherName: '',
      // ... 其他数据
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      setTimeout(() => {
        this.loading = false;
        this.teacherList = [
          { id: 1, name: "传老师", phone: "12800000020", position: "java老师", introduction: "资深java老师", courseCount: 0, questionCount: 0, registerTime: "2023-06-06T16:02:58", status: "normal" },
          { id: 2, name: "传老师", phone: "12800000019", position: "java老师", introduction: "资深java老师", courseCount: 0, questionCount: 0, registerTime: "2023-06-06T16:02:58", status: "normal" },
// 更多模拟数据...
        ];
        this.total = this.teacherList.length;
      }, 1000);
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleUpdate(row) {
      this.teacherInfo = { ...row };
      this.dialogTitle = '编辑教师信息';
      this.dialogVisible = true;
    },
    handleEnable(row) {
      this.currentTeacherName = row.name;
      this.disableDialogVisible = true;
    },
    handleResetPassword(row) {
      this.currentTeacherName = row.name;
      this.resetPasswordDialogVisible = true;
    },
    handleDisableTeacher() {
// 执行禁用教师的逻辑
      console.log('禁用教师', this.currentTeacherName);
      this.disableDialogVisible = false; // 关闭弹窗
    },
    handleResetTeacherPassword() {
// 执行重置教师密码的逻辑
      console.log('重置教师密码', this.currentTeacherName);
      this.resetPasswordDialogVisible = false; // 关闭弹窗
    },
    saveTeacherInfo() {
// 保存教师信息的逻辑
      console.log('保存教师信息', this.teacherInfo);
      this.dialogVisible = false; // 关闭弹窗
    },
    uploadAvatar(file) {
// 上传头像的逻辑
      console.log('上传头像', file);
    },
    showAddDialog() {
      this.addDialogVisible = true;
      this.newTeacherInfo = { // 重置新增教师信息表单
        name: '',
        phone: '',
        position: '',
        introduction: ''
      };
    },
    saveNewTeacherInfo() {
      // 保存新增教师信息的逻辑
      console.log('保存新增教师信息', this.newTeacherInfo);
      this.addDialogVisible = false; // 关闭弹窗
    },
// ... 其他方法
  }
};
</script>

<style scoped> .app-container { padding: 20px; } .dialog-footer { text-align: right; } .avatar-uploader { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader img { width: 100%; height: 100%; display: block; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; min-width: 178px; height: 178px; line-height: 178px; text-align: center; border: 1px dashed #d9d9d9; border-radius: 6px; background-color: #fbfdff; } </style>

